<template>
  <div>
    <div style="min-height:260px">
      <el-row v-for="item,index in lists" :key="index" style="padding:5px">
        <span>{{ index + 1}}、</span>
        <el-input style="width:300px;margin-right:20px" v-model.trim="item.value" placeholder></el-input>
        <el-button
          size="mini"
          circle
          plain
          type="primary"
          icon="el-icon-plus"
          @click="addOne(index)"
        ></el-button>
        <el-button
          size="mini"
          circle
          plain
          type="danger"
          icon="el-icon-minus"
          @click="delOne(index)"
        ></el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
    name: 'customSensitive',
    props: {
        listData: {
            type: String,
            default: '',
        },
    },
    created() {
        this.initList();
        console.log("custom-created");
    },
    mounted () {
      console.log("motu");;
    },
    data() {
        return {
            lists: [],
            inputValue: '',
            listsCopy: '',
        };
    },
    methods: {
        addOne(index) {
            var item = { value: '' };
            this.lists.splice(index + 1, 0, item);
        },
        delOne(index) {
            this.lists.splice(index, 1);
            if (this.lists.length <= 0) {
                this.lists = [{ value: '' }];
            }
        },
        initList() {
            if (this.listData) {
                this.lists = this.listData.split(',').map(item => {
                    var obj = { value: item };
                    return obj;
                });
            } else {
                this.lists = [{ value: '' }];
            }
        },
        
    },
    watch: {
        listData(newValue, oldValue) {
           this.initList();
            console.log('newValue :', newValue);
        },
    },
    activated(){
      console.log('重新激活了');
    }
};
</script>

<style lang="scss" scoped>
.tag_list {
    min-height: 200px;
    .el-tag {
        margin-right: 10px;
    }
}
</style>